<template>
  <div class="personal">
    <div class="w">
      <div class="container  l-screen">
        <div class="top clearfix">
          <el-breadcrumb separator-class="el-icon-arrow-right" class="fl">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>个人信息</el-breadcrumb-item>
          </el-breadcrumb>
          <div class="btns fr">
            <el-button v-if="isAdmin && (Authcode==101 || Authcode==201)" plain class="bmks" type="info" @click="$router.push({name: 'bmks'})">管理部门</el-button>
            <el-button v-if="isAdmin" class="seat" type="warning" @click="$router.push({name: 'seat'})">管理座位</el-button>
            <el-button v-if="isAdmin" class="admin" type="primary" @click="$router.push({name: 'admin'})">管理员工</el-button>
            <el-button v-if="isLogin" type="danger" class="loginOut" @click="outLogin">退出</el-button>
          </div>
        </div>
        <div class="card">
          <!-- 个人信息 -->
          <div class="info" v-loading="loading">
            <el-form ref="form" :inline="true" :model="userInfo" label-width="100px" :rules="rules1">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="userInfo.name"></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="userInfo.mobile"></el-input>
              </el-form-item>
              <el-form-item label="职位" prop="position">
                <el-input v-model="userInfo.position"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="userInfo.email"></el-input>
              </el-form-item>
              <el-form-item label="部门" prop="department">
                <!-- <el-input v-model="userInfo.department"></el-input> -->
                <el-select v-model="userInfo.department" placeholder="部门" @change="changeDepartment">
                  <el-option v-for="(item,index) in options.department" :key="index" :label="item.value" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="科室" prop="section_id">
                <!-- <el-input v-model="userInfo.section"></el-input> -->
                <el-select v-model="userInfo.section_id" placeholder="科室">
                  <el-option v-for="(item,index) in options.section" :key="index" :label="item.secname" :value="item.section_id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="卡位编号">
                <el-input v-model="seatinfo.seatid" disabled></el-input>
              </el-form-item>
              <el-form-item label="房间号">
                <el-input v-model="seatinfo.roomnumber" disabled></el-input>
              </el-form-item>
              <el-form-item label="内线">
                <el-input v-model="seatinfo.phonenumber" disabled></el-input>
              </el-form-item>
              <el-form-item label="IP地址">
                <el-input v-model="seatinfo.ipaddress" disabled></el-input>
              </el-form-item>
              <!-- <el-form-item label="管理权限">
                <el-input v-model="admin" disabled></el-input>
              </el-form-item> -->
            </el-form>
            <div class="update">
              <el-button type="success" @click="changeInfo">更新信息</el-button>
              <el-button type="warning" @click="openDialogPw">修改密码</el-button>
            </div>
          </div>

        </div>
      </div>

      <div class="container2 s-screen">
        <div class="title">个人信息</div>
        <el-form ref="form" :inline="true" :model="userInfo" label-width="70px" :rules="rules1">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="userInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="userInfo.mobile"></el-input>
          </el-form-item>
          <el-form-item label="职位" prop="position">
            <el-input v-model="userInfo.position"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userInfo.email"></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="department">
            <!-- <el-input v-model="userInfo.department"></el-input> -->
            <el-select v-model="userInfo.department" placeholder="部门" @change="changeDepartment">
              <el-option v-for="(item,index) in options.department" :key="index" :label="item.value" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="科室" prop="section">
            <!-- <el-input v-model="userInfo.section"></el-input> -->
            <el-select v-model="userInfo.section" placeholder="科室">
              <el-option v-for="(item, index) in options.section" :key="index" :label="item.secname" :value="item.section_id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="卡位编号">
            <el-input v-model="seatinfo.seatid" disabled></el-input>
          </el-form-item>
          <el-form-item label="房间号">
            <el-input v-model="seatinfo.roomnumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="内线">
            <el-input v-model="seatinfo.phonenumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="IP地址">
            <el-input v-model="seatinfo.ipaddress" disabled></el-input>
          </el-form-item>
          <!-- <el-form-item label="管理权限">
                <el-input v-model="admin" disabled></el-input>
              </el-form-item> -->
        </el-form>
        <div class="update">
          <el-button type="success" @click="changeInfo">更新信息</el-button>
          <el-button type="warning" @click="openDialogPw">修改密码</el-button>
        </div>
      </div>

    </div>

    <!-- 修改密码 -->
    <el-dialog title="修改密码" :visible.sync="dialog.pw" width="330px" center class="changPW">
      <el-form ref="pw_form" :model="pw_form" label-width="80px" :rules="rules2">
        <el-form-item label="原密码" prop="o_pw">
          <el-input v-model="pw_form.o_pw" onpaste="return false" ondragenter="return false" oncontextmenu="return false;" style="ime-mode:disabled" onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/gi,'')" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="n_pw">
          <el-input v-model="pw_form.n_pw" onpaste="return false" ondragenter="return false" oncontextmenu="return false;" style="ime-mode:disabled" onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/gi,'')" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="a_pw">
          <el-input v-model="pw_form.a_pw" onpaste="return false" ondragenter="return false" oncontextmenu="return false;" style="ime-mode:disabled" onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/gi,'')" show-password></el-input>
        </el-form-item>
        <div class="pw-btn">
          <el-button @click="dialog.pw = false">取 消</el-button>
          <el-button type="primary" @click="changePw('pw_form')">确 定</el-button>
        </div>
        <el-link class="fr" type="primary" @click="changeTabs(1)">重置密码</el-link>
        <!-- <el-link class="fr" type="primary" @click="resetPw">密码重置</el-link> -->
      </el-form>

    </el-dialog>

    <!-- 验证手机 -->
    <el-dialog title="验证手机" :visible.sync="dialog.valid" width="330px" center class="validMobile">
      <div class="tip">
        <img src="@/assets/images/shoujiyanzheng.png" alt="">
        为了您的账户安全，需要验证您的手机
        <div>{{sencePhone(userInfo.mobile)}}</div>
      </div>
      <el-form ref="pw_form2" :model="pw_form" label-width="60px" :rules="rules2">
        <el-form-item label="验证码" prop="validcode">
          <el-input v-model="pw_form.validcode" placeholder="请输入验证码" onkeyup="value=value.replace(/[^\d]/g,'')" style="width:134px;"></el-input>
          <el-button type="primary" class="code-btn" style="height: 39px;" :disabled="isSend" @click="sendCode">{{codeText}}</el-button>
        </el-form-item>
        <el-button type="primary" class="reset-next" @click="resetNext">下一步</el-button>

      </el-form>
      <el-link class="fr" type="primary" @click="changeTabs(0)">修改密码</el-link>
    </el-dialog>

    <!-- 验证码手机号=>重置密码 -->
    <el-dialog title="重置密码" :visible.sync="dialog.reset" width="330px" center>
      <el-form ref="pw_form3" :model="pw_form" label-width="80px" :rules="rules2">
        <el-form-item label="新密码" prop="n_pw">
          <el-input v-model="pw_form.n_pw" onpaste="return false" ondragenter="return false" oncontextmenu="return false;" style="ime-mode:disabled" onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/gi,'')" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="a_pw">
          <el-input v-model="pw_form.a_pw" onpaste="return false" ondragenter="return false" oncontextmenu="return false;" style="ime-mode:disabled" onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/gi,'')" show-password></el-input>
        </el-form-item>
        <div class="pw-btn">
          <el-button @click="dialog.reset = false">取 消</el-button>
          <el-button type="primary" @click="changePw('pw_form3')">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "personal",
  data() {
    return {
      isLogin: false,
      isAdmin: false,
      loading: false,
      userInfo: {
        name: '',
        mobile: '',
        position: '',
        email: '',
        department: '',
        section: '',
        section_id: '',
      },
      seatinfo: {},
      // admin: '无',
      dialog: {
        pw: false,
        valid: false,
        reset: false,
      },
      options: {
        department: [],
        section: [],
      },
      pw_form: {
        o_pw: '',
        n_pw: '',
        a_pw: '',
        validcode: '',
      },
      rules1: {
        name: [{ validator: this.validName, trigger: "blur" }],
        department: [{ validator: this.validDepartment, trigger: "blur" }],
        section_id: [{ validator: this.validSection, trigger: "blur" }],
        position: [{ validator: this.validPosition, trigger: "blur" }],
        mobile: [{ validator: this.validMobile, trigger: "blur" }],
        email: [{ validator: this.validEmail, trigger: "blur" }],
      },
      rules2: {
        o_pw: [{ validator: this.validO_pw, trigger: "blur" }],
        n_pw: [{ validator: this.validN_pw, trigger: "blur" }],
        a_pw: [{ validator: this.validA_pw, trigger: "blur" }],
        validcode: [{ validator: this.validateCode, trigger: "blur" }],
      },
      codeText: '获取验证码',
      isSend: false,
    };
  },
  created() {
    this.getUserInfo();
    this.getDpsinfo();
    this.checkCode();
    // this.init();
  },
  computed: {
    Authcode() {
      return this.$cookies.get("__ac")
    },
  },
  methods: {
    init() {
    },
    // 获取用户数据
    getUserInfo() {
      let tokenString = this.$cookies.get("__tk");
      let authorizeCode = this.$cookies.get("__ac");
      if (!tokenString) {
        this.isLogin = false;
        this.$router.push('/home')
        return;
      } else {
        this.isLogin = true;
        // 个人信息展示
        this.axios({
          method: 'POST',
          url: '/api/data_auth_search/',
          headers: {
            'Token': this.$cookies.get('__tk')
          },
          data: this.$qs.stringify({
            username: this.$cookies.get('__un'),
            authcode: 401,
            codition: 'mobile',
            searchText: this.$cookies.get('__un')
          })
        }).then(res => {
          // console.log('res==>', res)
          if (res.data.code == 100) {
            if (res.data.data.personinfo[0]) {
              this.userInfo = res.data.data.personinfo[0];
              this.seatinfo = this.userInfo.seatinfo;
              this.seatinfo.seatid2 = this.userInfo.seatinfo.seatid;
            } else {
              this.$message.error('获取个人信息失败，请重新刷新或询问管理员');
            }
            // console.log('userInfo==>', this.userInfo)
            this.loading = false;
          } else {
            this.$message.error('获取个人信息失败，请重新刷新或询问管理员');
            // this.$cookies.keys().map((cookieName) => {
            //   this.$cookies.remove(cookieName);
            // });
            // this.$router.push('/home')
          }
        }).catch(error => {
          // console.log('error==>', error)
          this.loading = false;
          this.$message.error('token令牌过期，请重新登录');
          this.$cookies.keys().map((cookieName) => {
            this.$cookies.remove(cookieName);
          });
          this.$router.push('/home')
        })

      }
      if (authorizeCode == 101 || authorizeCode == 301 || authorizeCode == 201) {
        this.isAdmin = true;
        // 权限展示
        // switch (authorizeCode) {
        //   case '101':
        //     this.admin = '超级管理员';
        //     break;
        //   case '201':
        //     this.admin = '部门管理员';
        //     break;
        //   case '301':
        //     this.admin = '科室管理员';
        //     break;
        //   default:
        //     this.admin = '无';
        //     break;
        // }
      } else {
        this.isAdmin = false;// 管理按钮显示
        return;
      }
      // console.log('登录状态==>', this.isLogin)
      // console.log('管理状态==>', this.isAdmin)

    },
    // 获取部门科室数据
    getDpsinfo() {
      this.axios({
        method: 'GET',
        url: '/api/dpsinfo/',
        headers: {
          'Token': this.$cookies.get('__tk')
        },
      }).then(res => {
        // console.log('dps res==>', res)
        if (res.data.code == 200) {
          // this.initData.list = res.data.data.personinfo;
          // this.initData.total = res.data.data.pageinfo.totalnum;
          let obj = res.data.data;
          for (let k in obj) {
            this.options.department.push({
              value: obj[k].department_name,
              id: obj[k].department_id,
              chlidren: obj[k].section
            })
          }
          // console.log('dpsinfo==>', this.options.department)
          for (const i in this.options.department) {
            if (this.options.department[i].value == this.userInfo.department) {
              this.options.section = this.options.department[i].chlidren;
              break;
            }
          }
        } else {
          this.$message.warning('请询问相关人员(获取个人信息失败)');
        }
      }).catch(error => {
        // console.log('error==>', error)
        this.$message.error(error || "出现错误，请稍后再试")
      })
    },
    // 部门-科室联动
    changeDepartment() {
      this.userInfo.section = '';
      for (const i in this.options.department) {
        if (this.options.department[i].value == this.userInfo.department) {
          this.options.section = this.options.department[i].chlidren;
          return
        }
      }
    },
    // 退出
    outLogin() {
      if (this.isLogin) {
        this.$cookies.keys().map((cookieName) => {
          this.$cookies.remove(cookieName);
        });
        this.isLogin = false;
        this.isAdmin = false;
        this.$message.success('退出成功');
        setTimeout(() => {
          this.$router.push({ name: 'home' });
        }, 500);
      } else {
        return
      }
    },
    // 更新信息请求
    changeInfo() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          let data = {
            id: this.userInfo.id,
            name: this.userInfo.name,
            // department: this.userInfo.department,
            email: this.userInfo.email,
            section_id: this.userInfo.section_id,
            position: this.userInfo.position,
            mobile: this.userInfo.mobile,
            authcode: this.userInfo.authcode,
            seatinfo_id: this.seatinfo.id,
          }
          // console.log('userInfo==>', data)
          this.axios({
            method: 'post',
            url: '/api/update_delete_info/',
            headers: {
              'Token': this.$cookies.get('__tk')
            },
            data: this.$qs.stringify(data)
          }).then(res => {
            // console.log('res==>', res)
            if (res.data.code == 200) {
              if (this._isMobile()) {
                this.$toast('修改成功')
              } else {
                this.$message.success('修改成功')
              }
            }
            if (res.data.code == 400) {
              if (this._isMobile()) {
                this.$toast('修改失败')
              } else {
                this.$message.error('修改失败')
              }
            }
          }).catch(error => {
            // console.log('error==>', error)
            this.$message.error(error || "出现错误，请稍后再试")
          })
        } else {
          if (this._isMobile()) {
            this.$toast.fail("请检查信息是否有误!")
          } else {
            this.$message.warning("请检查信息是否有误!");
          }
        }
      })
    },
    // 打开修改密码
    openDialogPw() {
      if (this.$refs.pw_form) {
        this.$refs.pw_form.resetFields();
      }
      this.dialog.pw = true;
    },
    // 更改密码请求
    changePw(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // console.log(this.pw_form);
          let data = {};
          if (formName == 'pw_form') {
            data = {
              username: this.$cookies.get('__un'),
              password: this.pw_form.o_pw,
              newpassword: this.pw_form.n_pw,
            }
          } else {
            data = {
              username: this.$cookies.get('__un'),
              newpassword: this.pw_form.n_pw,
            }
          }
          // 发起请求
          this.axios({
            method: 'POST',
            url: '/api/changepwd/',
            headers: {
              'Token': this.$cookies.get('__tk')
            },
            data: this.$qs.stringify(data)
          }).then(res => {
            // console.log('res==>', res)
            if (res.data.code == 100) {
              if (this._isMobile()) {
                this.$toast(res.data.msg)
              } else {
                this.$message.success(res.data.msg)
              }
              this.dialog.pw = false;
              this.dialog.reset = false;
            }
            if (res.data.code == 400) {
              if (this._isMobile()) {
                this.$toast.fail(res.data.msg)
              } else {
                this.$message.error(res.data.msg)
              }
            }
          }).catch(error => {
            // console.log('error==>', error)
            this.$message.error(res.data.msg)
          })

        } else {
          if (this._isMobile()) {
            this.$toast.fail("请检查密码是否有误!")
          } else {
            this.$message.warning("请检查密码是否有误!");
          }
          return false;
        }
      });
    },
    // 修改密码/重置密码
    changeTabs(i) {
      if (i == 0) {
        if (this.$refs.pw_form) {
          this.$refs.pw_form.resetFields()
        }
        this.dialog.pw = true;
        this.dialog.valid = false;
      } else {
        if (this.$refs.pw_form2) {
          this.$refs.pw_form2.resetFields()
        }
        this.dialog.valid = true;
        this.dialog.pw = false;
      }
    },
    //通过字符串截取中间四位数字，转化为****
    sencePhone(val) {
      let returnVal = val
      if (val) {
        returnVal = val.substr(0, 3) + "*****" + val.substr(8)
      }
      return returnVal
    },
    // 检查获取验证码是否倒计时
    checkCode() {
      if (this.$cookies.isKey('total')) {
        let time = this.$cookies.get('total');
        this.codeText = `${time}s后重新发送`;
        this.isSend = true;

        let timer = setInterval(() => {
          time = this.$cookies.get('total');
          time--;
          this.codeText = `${time}s后重新发送`;
          if (time <= 0) {
            clearInterval(timer);
            this.$cookies.remove('total')
            this.codeText = '获取验证码';
            this.isSend = false;
          } else {
            this.$cookies.set('total', time, time)
          }
        }, 1000)
      }
    },
    //获取验证码
    sendCode() {
      //验证手机格式是否正确
      let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!reg.test(this.loginInfo.username)) {
        this.$message.warning("请输入正确的手机号！")
        return;
      }

      let time = 60;
      this.$cookies.set('total', time, 60)
      this.codeText = `${time}s后重新发送`;
      this.isSend = true;

      let timer = setInterval(() => {
        time = this.$cookies.get('total');
        time--;
        this.codeText = `${time}s后重新发送`;
        if (time <= 0) {
          clearInterval(timer);
          this.$cookies.remove('total')
          this.codeText = '获取验证码';
          this.isSend = false;
        } else {
          this.$cookies.set('total', time, time)
        }
      }, 1000)
      //发起获取验证码请求
      this.axios({
        method: 'POST',
        url: '/api/login/',
        data: this.$qs.stringify({
          username: this.loginInfo.username
        })
      }).then(res => {
        // console.log('res ==> ', res);
        if (res.data.data.status == 200) {
          this.$message.success('验证码已发送');
        } else {
          this.$message.error('验证码发送失败');
        }
      }).catch(err => {
        this.$message.error(err || "出现错误，请稍后再试");
      })
    },
    // 验证手机号=>打开重置密码
    resetNext() {
      this.$refs.pw_form2.validate(valid => {
        if (valid) {
          let data = {
            username: this.$cookies.get('__un'),
            text: this.pw_form.validcode
          }
          this.axios({
            method: 'POST',
            url: '/api/login/',
            data: this.$qs.stringify(data),
          }).then(res => {
            // console.log('res==>', res)
            if (res.data.data.status == 200) {
              this.dialog.valid = false;
              if (this.$refs.pw_form3) {
                this.$refs.pw_form3.resetFields();
              }
              this.dialog.reset = true;
            } else {
              if (this._isMobile()) {
                this.$toast.fail(res.data.data.msg)
              } else {
                this.$message.warning(res.data.data.msg)
              }
            }
          }).catch(err => {
            this.$message.error(error || "出现错误，请稍后再试");
          })
        } else {
          return false;
        }
      })

    },
    // 初始化密码
    resetPw() {
      const h = this.$createElement;
      this.$msgbox({
        title: '提示',
        message: h('p', null, [
          h('span', null, '点击确定将会初始化密码，是否'),
          h('b', { style: 'color: #0d2d84' }, '继续')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(action => {
        this.axios({
          method: 'POST',
          url: '/api/managerpwd/',
          headers: {
            'Token': this.$cookies.get('__tk')
          },
          data: this.$qs.stringify({
            username: this.$cookies.get('__un'),
          })
        }).then(res => {
          // console.log('res==>', res)
          if (res.data.code == 200) {
            this.$message.success('密码初始化成功')
          } else {
            this.$message.error('密码初始化失败')
          }
        }).catch(err => {
          // console.log('err==>', err)
          this.$message.error(err || "出现错误，请稍后再试")
        })
      });
    },
    // 验证姓名
    validName(rule, value, callback) {
      if (value == "") {
        callback();
        // callback(new Error("请输入姓名"));
      } else {
        if (!/^[\u4e00-\u9fa5·]{2,5}|[a-zA-Z]$/.test(value)) {
          callback(new Error("姓名有误!"));
        } else {
          callback();
        }
      }
    },
    // 验证手机号
    validMobile(rule, value, callback) {
      if (value == "") {
        // callback();
        callback(new Error("请输入手机号"));
      } else {
        if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
          callback(new Error("手机格式错误!"));
        } else {
          callback();
        }
      }
    },
    // 验证部门
    validDepartment(rule, value, callback) {
      if (value == "") {
        callback(new Error("请选择部门"));
      } else
        callback();
    },
    // 验证科室
    validSection(rule, value, callback) {
      if (value == "") {
        // callback();
        callback(new Error("请选择科室"));
      } else {
        callback();
      }
    },
    // 验证职务
    validPosition(rule, value, callback) {
      if (value == "" || value == null) {
        callback();
      } else {
        // if (!/^[\u4e00-\u9fa5\、]{2,}$/.test(value)) {
        //   callback(new Error("职位有误, 多个职务用中文顿号(、)隔开"));
        // } else {
        //   callback();
        // }
        callback();
      }
    },
    // 验证邮箱
    validEmail(rule, value, callback) {
      if (value == "" || value == '暂无') {
        callback();
      } else {
        if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
          callback(new Error("邮箱格式错误!"));
        } else {
          callback();
        }
      }
    },
    // 验证卡位编号
    validSeatid(rule, value, callback) {
      if (value != "") {
        if (this.seatinfo.seatid == this.seatinfo.seatid2) {
          callback()
          return;
        }
        this.axios({
          method: 'get',
          url: '/api/checkseatid/',
          headers: {
            'Token': this.$cookies.get('__tk')
          },
          params: { seatid: this.seatinfo.seatid }
        }).then(res => {
          // console.log('res==>', res)
          if (res.data.code == 200) {
            // 可分配
            this.seatinfo.id = res.data.data.id;
            this.seatinfo.ipaddress = res.data.data.ipaddress;
            this.seatinfo.roomnumber = res.data.data.roomnumber;
            this.seatinfo.roomname = res.data.data.roomname;
            this.seatinfo.phonenumber = res.data.data.phonenumber;
            callback()
          } else if (res.data.code == 304) {
            // 已分配
            this.$message.warning(res.data.msg)
          } else if (res.data.code == 400) {
            // 无座
            this.$message.warning(res.data.msg)
          }
          callback();
        }).catch(error => {
          // console.log('error==>', error)
          this.$message.error(error || "出现错误，请稍后再试")
        })
      } else {
        this.$message.warning('卡位编号不能为空');
      }
    },
    // 验证密码
    validO_pw(rule, value, callback) {
      if (value === "") {
        callback(new Error('原密码不能为空'));
      } else {
        callback();
      }
    },
    validN_pw(rule, value, callback) {
      if (value === "") {
        callback(new Error('新密码不能为空'));
      } else {
        callback();
      }
    },
    validA_pw(rule, value, callback) {
      if (value !== this.pw_form.n_pw) {
        callback(new Error('两次密码不相同'));
      } else {
        callback();
      }
    },
    // 验证码验证
    validateCode(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        if (!/\d{6}/.test(value)) {
          callback(new Error("验证码格式错误!"));
        } else {
          callback();
        }
      }
    },
    // 是否为移动端
    _isMobile() {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
      return flag;
    },
  },
};
</script>

<style lang="scss" scoped>
.personal {
  .container {
    padding: 30px;
    background-color: #fff;
    border-radius: 6px;
    height: calc(100% - 60px);
    .top {
      margin-bottom: 20px;
      >>> .el-breadcrumb {
        font-size: 20px;
        height: 40px;
        line-height: 40px;
      }
    }
    .card {
      width: calc(100% - 82px);
      // height: 1000px;
      padding: 20px;
      margin: 0px auto;
      border: 1px solid #ccc;
      position: relative;
      &::before {
        display: block;
        content: "";
        height: 28px;
        width: 38px;
        position: absolute;
        top: 9px;
        transform: rotate(45deg);
        right: 5px;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        z-index: 2000;
      }
      &::after {
        display: block;
        content: "";
        height: 28px;
        width: 38px;
        position: absolute;
        bottom: 10px;
        transform: rotate(45deg);
        left: 4px;
        background-color: #fff;
        border-top: 1px solid #ccc;
        z-index: 2000;
      }

      .info {
        width: calc(100% - 82px);
        padding: 20px 40px;
        border: 1px solid #ccc;
        margin: 0px auto;
        position: relative;

        >>> .el-form {
          margin: 0px 0px 0px 50px;
          width: 926px;
          // text-align: center;
          .el-form-item {
            margin-right: 50px;
            label.el-form-item__label {
              text-align: justify;
              font-size: 18px;
              height: 40px;
              &::after {
                display: inline-block;
                width: 100%;
                content: "";
                height: 0;
              }
            }
            .el-input {
              width: 300px;
            }
          }
        }
        .update {
          text-align: center;
          .el-button + .el-button {
            margin-left: 50px;
          }
        }
      }
    }
  }
  >>> .el-dialog__wrapper {
    &.validMobile {
      .el-dialog__body {
        padding-top: 0px;
      }
    }
    .el-dialog {
      border-radius: 6px;
      .el-form {
        .el-form-item {
          // margin-right: 0;
          label.el-form-item__label {
            text-align: justify;
            font-size: 14px;
            height: 40px;
            &::after {
              display: inline-block;
              width: 100%;
              content: "";
              height: 0;
            }
          }
          .el-input {
            width: 200px;
          }
          .code-btn {
            width: 82px;
            padding-left: 5px;
            padding-right: 5px;
          }
        }
      }
      .pw-btn {
        text-align: center;
        margin-bottom: 14px;
        .el-button {
          width: 100px;
          height: 40px;
        }
        .el-button + .el-button {
          margin-left: 50px;
        }
      }
      .el-link--inner {
        height: 14px;
        line-height: 1;
      }
      .tip {
        text-align: center;
        margin-bottom: 14px;
        img {
          margin: 0 auto;
          display: block;
        }
      }
      .reset-next {
        width: 100%;
        margin-bottom: 15px;
      }
    }
  }
  .container2 {
    background-color: #fff;
    border-radius: 6px;
    padding: 20px;
    min-height: calc(100vh - 160px);
    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    >>> .el-form {
      .el-form-item {
        width: calc(100vw - 40px);
        label.el-form-item__label {
          text-align: justify;
          height: 40px;
          &::after {
            display: inline-block;
            width: 100%;
            content: "";
            height: 0;
          }
        }
        .el-form-item__content {
          width: calc(100% - 70px);
          .el-select {
            width: 100%;
          }
        }
      }
    }
    .update {
      text-align: center;
      .el-button + .el-button {
        margin-left: 15vw;
      }
    }
  }
}
</style>